<template>
	<view :class="['s-tabs',customClass]">
		<view class="s-tabs-nav-wrap" :style="{height:height+'upx'}">
		<scroll-view
		  class="scroll-view"
		  :show-scrollbar="false"
		  scroll-with-animation
		  scroll-x
		  :scroll-left="scrollLeft"
		>
		  <div
		    :class="['s-tab-nav',{'is-active':value == index}]"
		    :style="{
		      width:navWidth,
		      color:value == index ? activeColor : color
		    }"
		    v-for="(item,index) of navList"
		    :key="index"
		    @click="navClick(index,item)"
		  ><text class="s-tab-text">{{item}}</text></div>
		  <!-- <div
		    v-if="line"
		    :class="sys.platform != 'android' && sys.version ? 's-tab-line s-tab-line-iphone' : 's-tab-line' "
		    :style="{
		      width:lineWidth+'px',
		      height:lineHeight+'rpx',
		      background:lineColor,
		      transform:'translateX('+lineLeft+'px)',
			  borderRadius:Radius+'rpx',
			  bottom:bottom+'rpx',
			  zIndex:'2'
		    }"
		  ></div> -->
		</scroll-view>
		</view>
	</view>
</template>

<script>
			    // v-html="item"
	export default {
		name: 's-tabs',
		props: {
		  // class
		  customClass: {
		    type: String,
		    default: ''
		  },
		  // v-model双向绑定
		  value: {
		    type: Number,
		    default: 0
		  },
		  color: {
		    type: String,
		    default: '#333'
		  },
		  activeColor: {
		    type: String,
		    default: '#FF2842'
		  },
		  // 标签栏高度 rpx
		  height: {
		    type: Number,
		    default:110
		  },
		  // 自适应宽度还是百分比等分
		  navPerView: {
		    type: [Number, String],
		    default: 'auto'
		  },
		  // 内容部分是否动画切换
		  effect: {
		    type: Boolean,
		    default: false
		  },
		  // 内容部分动画切换时间
		  duration: {
		    type: Number,
		    default: 0.3
		  },
		  // 是否显示底部条
		  line: {
		    type: Boolean,
		    default: true
		  },
		  // 底部条颜色
		  lineColor: {
		    type: String,
		    default: '#F73E2F'
		  },
		  // 底部条高度 rpx
		  lineHeight: {
		    type: Number,
		    default: 4
		  },
		  // 底部条宽度相对于标签宽度比例
		  lineScale: {
		    type: Number,
		    default:0.7
		  },
			navList:{
				type:Array
			},
			Radius:{
				type:Number
			},
			bottom:{
				type:Number
			}
		},
		watch: {
		  value (index) {
		    this.refreshLine();
		    this.$emit('change', index);
		  }
		},
		data() {
			return {
				scrollLeft: 0,
				lineWidth: 0,
				lineLeft: 0,
				sys : uni.getSystemInfoSync(),
			};
		},
		computed: {
		  navWidth () {
		    const perView = +this.navPerView.toFixed(1);
			// console.log(perView)
		    return isNaN(perView) ? 'auto' : 100 / perView + '%';
		  },
		  transform () {
		    return `transform: translate3d(${-100 * this.value}%, 0, 0);`;
		  },
		  transition () {
		    return this.effect ? `transition-duration: ${this.duration}s;` : '';
		  }
		},
		created() {
			// let get = uni.getSystemInfoSync();
			// console.log('版本号',get.platform)
			// this.toast(get.platform)
		},
		methods:{
			navClick (index,item) {
				 // this.$emit('input', index);
			  if (index !== this.value) {
			    this.$emit('input', index,item);
			  }
			},
			refreshLine () {
			  if (!this.line) return;
			  let version = uni.getSystemInfoSync().version
			  this.$nextTick(() => {
			    const query = () => uni.createSelectorQuery().in(this);
			    query().select('.s-tabs-nav-wrap').boundingClientRect().exec(([viewElem]) => {
					// console.log(viewElem)
			      const viewWidth = viewElem.width;
			      let offsetLeft = 0;
			      let contentWdith = 0;
			      let curNavWidth = 0;
			      query().selectAll('.s-tab-nav').boundingClientRect().exec(([list]) => {
					  // console.log(list)
			        list.forEach((item, index) => {
			          if (index <= this.value) {
			            curNavWidth = item.width;
			            offsetLeft += item.width;
			          }
			          contentWdith += item.width;
			        });
			        offsetLeft -= curNavWidth;
			        this.scrollLeft = Math.min(Math.max(contentWdith - viewWidth, 0), Math.max(0, offsetLeft - (viewWidth - curNavWidth) / 2));
					console.log(curNavWidth)
			        this.lineWidth = curNavWidth * this.lineScale;
			        this.lineLeft = offsetLeft + (curNavWidth - this.lineWidth) / 2;
			      });
			    });
			  });
			}
		},
		  mounted () {
			this.refreshLine();
		  }
	}
</script>

<style lang="less">
.s-tabs {
  width: 100%;
  position: relative;
  overflow-x: hidden;
  font-size: 28rpx;
  .s-tabs-nav-wrap {
    width: 100%;
    height:100upx;
    display: flex;
    white-space: nowrap;
    .scroll-view {
      height: 100%;
      position: relative;
	  background-color: #FFFFFF;
      ::-webkit-scrollbar {
        display: none;
      }
    }
  }
  .s-tab-nav {
    display: inline-flex;
    height: 100%;
    font-size:30rpx;
    padding: 0 30rpx;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    cursor: pointer;
	position: relative;
	z-index: 8;
  }
  .is-active{
	  text{
		  display: block;
		  padding: 0 10upx;
		  position: relative;
		  z-index: 5;
		  &::after{
			  content: "";
			  display: block;
			  width: 100%;
			  height:16upx;
			  background-color:#fdd8d5;
			  border-radius: 8upx;
			  margin: 0 auto;
			  position: absolute;
			  left: 0;
			  right: 0;
			  bottom: 0;
			  z-index: -1;
		  }
	  }
  }
  .s-tab-line {
    position: absolute;
    bottom: calc(var(--window-bottom));
    border-radius: 6rpx;
    transition: all 0.3s;
  }
  .s-tab-line-iphone{
	  bottom: 40upx;
  }
  .s-tabs-content-wrap {
    white-space: nowrap;
  }
}
</style>
